<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/1.head.css">
    <link rel="stylesheet" href="./font_mp8ngpus25m/iconfont.css">
    
</head>
<body>
    <header>
    <!-- 头部 -->
   <div class="headers">
    <div class="heads">
        <div class="lefts">
          <ul class="ulse"> 
              <li><a href="3.index.html"> JMGO</a></li>
              <li><a href="4.Nutmall.html"> 坚果商城</a></li>
              <li><a href="#"> 行业定制</a></li>
              <li><a href="#"> LUNA OS</a></li>
              <li><a href="7.xianxiamengding.html"> 线下门店</a></li>
              <li><a href="#"> 了解坚果</a></li>
              <li><a href="#"> JM以旧换新GO</a></li>
            
          </ul>
        </div>

        <div class="rights">
            <ul>
                <li class="lis1"><a href="#">登录</a></li>
                <li class="lis2"><a href="#">注册</a></li>
                <li><a href="8.ShoppingCart.htmll">购物车(0)</a></li>
                <li><a href="#">Global</a></li>
            </ul>
        </div> 
        <!-- 登录 -->
        <div class="zheceng">
        <div class="denglu">
            <a href="#"><div class="xiaoshi">X</div></a>
            <div class="demhluneikuang">
                
                <div class="xuanxiang">
                    <a href="#" id="i">登录JmGO账号</a>
                    <a href="#" id="l">短信快捷登录</a>
                </div>
                <!-- 短信登录 -->
                <form action="#" class="duanxingdenglu">
                    <input type="text" class="duanxingd" placeholder="手机号">
                    <button class="button">获取验证码</button>
                    <input type="text" class="duuanxingyanzhengd" placeholder="输入短信验证码">
                </form>
                    <!-- JmGo登录 -->
                <form action="#" class="JmGodenglu">
                <input type="text" class="jianguod" id="" placeholder="手机号/邮箱/用户名">
                <input type="text" class="jianguuomimad" placeholder="密码">
                </form>
                <div class="jizhu">
                    <input type="checkbox"class="fuxuankuang">
                    <label class="remember">记住登录状态</label>
                    <a href="#">忘记密码？</a>
                </div>
                <a href="#"><button class="denglukey" id="login_btn" >登录</button></a>
                <div id="tongxing">
                    <a href="#" class="a"><span class="iconfont icon-xinlangweibo"></span></a>
                    <a href="#" class="a"><span class="iconfont icon-QQ-circle-fill"></span></a>
                    <a href="#" class="a"><span class="iconfont icon-weixin"></span></a>
                    <p><a href="#">注册JmGO账号></a></p>
                </div>
               
            </div>
           
        </div> 
        </div>
        <!-- 注册 -->
        <div class="zhucezhecen">
            <div class="zhucez">
                <a href="#"><div class="xiaoshiz">X</div></a>
                <div class="biaotiz">注册JmGO账号</div>
                <form action="#" class="formzhucez">
                    <input type="text" class="inputz" placeholder="输入图片验证码">
                    <a href="#" id="changeImg">
                        <canvas class="show-captcha" id="canvas" width="120" height="33">
                        </canvas>
                    </a>
                    <input type="text" class="inputzsj" placeholder="用户名">

                    <input type="text" class="inputzmm" placeholder="密码">
                    <span class="mmpd"></span>
                    <input type="text" class="inputzqr" placeholder="确认密码">
                    <span class="qrmmpd"></span>
                </form>
                <div class="xieyiz">
                    <input type="checkbox"class="fuxuankuangz"><span class="spanz">我已阅读并接受<a href="#" class="jmgoz">《JmGO用户协议》</a></span>
                    <a href="#"><button class="bu" id="success" >注册</button></a>
                </div>
            </div>
        </div>
    </div>

 
   </div>
   <!-- 导航栏 -->
   <div class="nav">
       <a href="3.index.html">
            <img src="./images/0.png" alt="">
        </a>
        <ul id="Uls">
            <li class="li1">
                <a href="#" class="a"></a>
                <div class="homeprojection">
                    <ul class="xialalkuang">
                        <li>
                            <a href="6.magnifier.html"><img src="./images/2.png" alt=""></a>
                            <a href="#"><span class="textwuhe">坚果O1 ORP<sup>最新</sup></span></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/1.png" alt=""></a>
                            <a href="#"><span class="textwuhe">【新品上市】坚果G9S</span></a>
                        </li>
                        <li><a href="#"><img src="./images/3.png" alt=""></a>
                            <a href="#"><span class="textwuhe">坚果J10<sup>最新</sup></span></a>
                        </li>
                        <h3>查看全部></h3>
                    </ul>
                    
               </div>
            </li>
            <li class="li2">
                <a href="#" class="a"></a>
                <div class="movedropdown">
                    <ul class="xialalkuangs">
                     <li>
                         <a href="#"><img src="./images/4.png" alt=""></a>
                         <a href="#"><span class="textwuhe">坚果M7</span></a>
                     </li>
                     <li class="m7">
                         <a href="#"><img src="./images/5.jpg" alt=""></a>
                         <a href="#"><span class="jianguom7"></span></a>
                         <a href="#"><span class="textxiaohe">坚果T9</span></a>
                     </li>
                     <li class="m7">
                         <a href="#"><img src="./images/6.jpg" alt=""  class="t9"></a>
                         <a href="#"><span class="jianguom7"></span></a>
                         <a href="#"><span class="textxiaohe">坚果M6(玫瑰金)</span></a>
                         
                     </li>
                    <h3>查看全部></h3>
                 </ul>
                </div>
            </li>
            <li class="li3">
                <a href="#" class="a"></a>
                <div class="LaserTV">
                    <ul class="xialalkuang">
                        <li>
                            <a href="#"><img src="./images/7.png" alt=""></a>
                            <a href="#"><span class="textwuhe">【1月22日发货】坚果U2</sup></span></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/8.png" alt=""></a>
                            <a href="#"><span class="textwuhe">坚果S3</span></a>
                        </li>
                        <li class="m7">
                            <a href="#"><img src="./images/9.png" alt=""></a>
                            <a href="#"><span class="jianguom7"></span></a>
                            <a href="#"><span class="textxiaohe">坚果SU</span></a>
                        </li>
                        <h3>查看全部></h3>
                    </ul>
            
                </div>
            </li>
            <li class="li4">
                <a href="#" class="a"></a>
                <div class="Industryregulations">
                    <ul class="xialalkuang">
                        <li>
                            <a href="#"><img src="./images/10.png" alt=""></a>
                            <a href="#"><span class="textwuhe">坚果F1</sup></span></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/11.png" alt=""></a>
                            <a href="#"><span class="textwuhe">坚果F2</span></a>
                        </li>
                        <li>
                            <a href="#"><img src="./images/12.png" alt=""></a>
                            <a href="#"><span class="textwuhe">坚果K9</span></a>
                        </li>
                        <h3>查看全部></h3>
                    </ul>
                </div>
            </li>
            <li class="li5">
                <a href="#" class="a"></a>
                <div class="Nutaccessories">
                    <ul class="xialalkuang">
                        <li>
                            <a href="#"><img src="./images/13.png" alt=""></a>
                            <a href="#"><span class="textwuhe">蓝牙语音遥控</sup></span></a>
                        </li>
                        <li class="m7">
                            <a href="#"><img src="./images/14.jpg" alt=""></a>
                            <a href="#"><span class="jianguom7"></span></a>
                            <a href="#"><span class="textxiaohe">100英寸电动屏幕</span></a>
                        </li>
                        <li class="m7">
                            <a href="#"><img src="./images/15..jpg" alt=""></a>
                            <a href="#"><span class="jianguom7"></span></a>
                            <a href="#"><span class="textxiaohe">地面沉重三角支架</span></a>
                        </li>
                        <h3>查看全部></h3>
                    </ul>
                
                </div>
            </li>
            <li><a href="#" class="a"></a></li>
        </ul>
        <i class="sosuokuang"><a href="#">
        <span class="iconfont icon-sousuo"></span>
        </a></i>
   </div>
</header>
    
</body>
</html>
<script src="./js/jQuery.js"></script>
<script src="./js/1.head.js"></script>
<script>
    // 登录接口
    let oBtnLogin = document.querySelector("#login_btn");
    let oUserPass = document.querySelector(".jianguuomimad");
    let oUserName = document.querySelector(".jianguod");
 
    oBtnLogin.onclick = function() {
    let xhr = new XMLHttpRequest();
    xhr.open("post", "./goods/login.php", true);

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
    // console.log(xhr.responseText.indexOf('success'));
       if (xhr.responseText==1) {
            alert("登录成功");
            console.log()
            window.location.href = "3.index.html";
       } else {
           alert("登录失败");

       }
    }
 }

     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

     let str = "username=" + oUserName.value + "&userpass=" + oUserPass.value;
     xhr.send(str);  
     }

     

    //  注册接口

    // 手机验证码
    let shojihao = document.querySelector(".inputzsj")
    let reg = /^[\u4e00-\u9fa5]{2,5}$/;
    let hasUser = false;
    shojihao.onblur = function () {
        // console.log(111);
        if (reg.test(shojihao.value) == false) {
            document.querySelector(".sjhmpd").innerHTML = "x";
        } else {
            $.get("./goods/checkUser.php", { "username": shojihao.value }, function (data) {
                if (data == 0) {
                    document.querySelector(".sjhmpd").innerHTML = "√";
                    hasUser = true;
                } else{
                    document.querySelector(".sjhmpd").innerHTML = "x";
                    hasUser = false;
                }
            })
        }
    }

    shojihao.onfocus = function () {
        document.querySelector(".sjhmpd").innerHTML = "";
    }

    // 密码
    let oInputmm = document.querySelector(".inputzmm");
    let reg1 = /^(?![0-9]+$)\w{6,16}$/;
    oInputmm.onblur = function () {
        if (reg1.test(oInputmm.value) == false) {
            document.querySelector(".mmpd").innerHTML = "×"
        } else {
            document.querySelector(".mmpd").innerHTML = "√"
            setTimeout(() => {
                document.querySelector(".mmpd").innerHTML = ""
            }, 2000);
        }
    }
    oInputmm.onfocus = function () {
        document.querySelector(".mmpd").innerHTML = "";
    }

    // 确认密码
    let oInputzmm = document.querySelector(".inputzmm");
    let reg2 = /^(?![0-9]+$)\w{6,16}$/
    oInputzmm.onblur = function () {
        if (reg2.test(oInputzmm.value) == false) {
            document.querySelector(".qrmmpd").innerHTML = "×"
        } else {
            document.querySelector(".qrmmpd").innerHTML = "√"
            setTimeout(() => {
                document.querySelector(".qrmmpd").innerHTML = ""
            }, 2000);
        }
    }
    oInputzmm.onfocus = function () {
        document.querySelector(".qrmmpd").innerHTML = "";
    }

    // 注册


    let tijiao = document.querySelector("#success");
    tijiao.onclick = function () {
        
        if(hasUser){
            alert("用户名已被占用");
				return 
			}	
        if (!reg.test(shojihao.value) == true || !reg1.test(oInputmm.value) == true || !reg2.test(oInputzmm.value) == true) {
            return;
        }
        $.post("./goods/addUser.php", { "username": shojihao.value, "userpass": oInputmm.value }, function (rel) {
            console.log(rel)
            if (rel.trim() == "success") {
                alert("注册成功");
                    // location.href = "./login.html"
            } else if (rel.trim() == "fail") {
                alert("用户名已被占用");
            } else {
                console.log(rel);
            }
        })
       
    }
</script>







